<!--
 * @description: 
 * @Author: vikingShip
 * @Date: 2021-10-29 16:22:51
 * @LastEditors: latiao
 * @LastEditTime: 2022-07-22 09:32:16
-->
<template>
  <div>
    <div class="specDetail">
      <div class="specDetail__title">规格明细</div>
      <div class="specDetail__table">
        <div class="specDetail__table__title">
          <div :class="[
              !specHeader.includes(item)
                ? 'specDetail__table__title--custom'
                : 'specDetail__table__title--primary',
            ]" v-for="(item, index) in filterHeader" :key="index">
            {{ item }}
          </div>
        </div>
        <!-- 多规格 -->
        <div class="specDetail__table__list">
          <div class="specDetail__table__item" v-for="(item, index) in getSpecList" :key="index">
            <div class="specDetail__table__item--font" v-if="!Array.isArray(item.productSpecNames)">
              {{ item.productSpecNames.name }}
            </div>
            <div class="specDetail__table__item--font" v-else v-for="(ite, inde) in item.productSpecNames" :key="inde">
              {{ ite }}
            </div>
            <div class="specDetail__table__item--upload">
              <el-upload class="productImg__uploader product__productImg" :auto-upload="false" :on-change="uploadSkuImg"
                action :show-file-list="false" style="width: 50px; height: 50px">
                <i style="width: 50px; height: 50px; line-height: 50px"
                  class="el-icon-plus product__productImg--uploader--icon" @click="productSkuIndex = index"
                  v-if="item.pic === ''"></i>
                <img :src="item.pic" alt="" style="width: 50px; height: 50px" @click="productSkuIndex = index" v-else />
              </el-upload>
            </div>
            <div class="specDetail__table__item--input">
              <el-input v-model="item.originalPrice"></el-input>
            </div>
            <div class="specDetail__table__item--input">
              <el-input v-model="item.price"></el-input>
            </div>
            <div class="specDetail__table__item--input">
              <el-input-number v-model="item.stock" :step="1" placeholder="0" :min="0" step-strictly :controls="false"
                :precision="0"></el-input-number>
            </div>
            <div class="specDetail__table__item--input">
              <el-input-number v-model="item.perLimit" :step="1" placeholder="0" :min="0" step-strictly
                :controls="false" :precision="0"></el-input-number>
            </div>
            <div class="specDetail__table__item--input">
              <el-input v-model="item.weight"></el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 批量设置 -->
    <div class="batch">
      <div class="batch__title">批量设置</div>
      <div class="batch__list">
        <div class="batch__list-item">
          <span>指导价</span>
          <el-input style="width: 60px" v-model="batchOriginalPrice" @change="batchSetOriginal"></el-input>
        </div>
        <div class="batch__list-item">
          <span>实售价</span>
          <el-input style="width: 60px" v-model="batchPrice" @change="batchSetPrice"></el-input>
        </div>
        <div class="batch__list-item">
          <span>库存</span>
          <el-input style="width: 60px" v-model="batchStock" @change="batchSetStock"></el-input>
        </div>
        <div class="batch__list-item">
          <span>限购</span>
          <el-input style="width: 60px" v-model="batchPerLimit" @change="batchSetPerlimit"></el-input>
        </div>
        <div class="batch__list-item">
          <span>重量</span>
          <el-input style="width: 60px" v-model="batchWeight" @change="batchSetWeight"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
import { ClassListType, NormType } from "./goodNormType";
import { upLoad } from "@/api/index";
// interface SpecType {
//   name: string;
//   guidePrice: string;
//   realPrice: string;
//   stock: string;
//   limitTrade: string;
//   weight: string;
//   title: string;
//   skuImgUrl: string;
//   children: SpecType[];
// }
@Component
export default class GoodsNormsDetail extends Vue {
  specHeader = ["sku图","指导价", "实售价", "库存", "限购", "重量" ];
  @Prop()
  list;
  @Prop()
  classArr: NormType[];
  @Prop()
  memoSpecList;

  productSkuIndex = 0;

  get filterHeader() {
    let tempArr = this.classArr;
    return tempArr
      .map((item) => {
        return item.name;
      })
      .concat(this.specHeader);
  }
  normRules = {
    // originalPrice: [{ required: true, message: "请输入指导价", trigger: "blur" }],
  };
  // 批量设置规格
  batchOriginalPrice = 0;
  batchPrice = 0;
  batchStock = 0;
  batchWeight = 0;
  batchPerLimit = 0;

  get getSpecList() {
    const memoSpecList = this.memoSpecList;
    let list = this.list;
    if (memoSpecList.length > 0) {
      list = list.map((item, index) => {
        const tempArr = memoSpecList.filter((ite) => {
          if (this.equar(item.productSpecNames, ite.productSpecNames)) {
            return ite;
          }
        });
        if (tempArr.length > 0) item = tempArr[0];
        return item;
      });
    }
    return list;
  }
  /**
   * 上传sku
   */
  async uploadSkuImg(file) {
    const whiteList = ["image/jpeg", "image/jpg", "image/png"];
    const isLt1M = file.size < 2 * 1024 * 1024;
    if (!whiteList.includes(file.raw.type)) {
      this.$message.error("上传文件只能是 JPG或PNG 格式!");
      return;
    }
    if (!isLt1M) {
      this.$message.error("上传文件大小不能超过 2MB!");
      return;
    }

    const res = await upLoad({
      file: file.raw,
    });
    this.getSpecList[this.productSkuIndex].pic = res.data;
  }
  getNormList() {
    console.log(this.getSpecList)
    return this.getSpecList;
  }
  //批量指导价
  batchSetOriginal(e) {
    if (!this.checkPriceField(e)) return this.$message.error("请填写数值");
    let tempArr = [];
    tempArr = this.getSpecList.map((item) => {
      item.originalPrice = e;
      return item;
    });
    this.$emit("changeNormList", tempArr);
  }
  // 批量设置实售价
  batchSetPrice(e) {
    if (!this.checkPriceField(e)) return this.$message.error("请填写数值");
    let tempArr = [];
    tempArr = this.getSpecList.map((item) => {
      item.price = e;
      return item;
    });
    this.$emit("changeNormList", tempArr);
  }
  // 批量设置库存
  batchSetStock(e) {
    if (!this.checkPriceField(e)) return this.$message.error("请填写数值");
    let tempArr = [];
    tempArr = this.getSpecList.map((item) => {
      item.stock = e;
      return item;
    });
    this.$emit("changeNormList", tempArr);
  }
  // 批量设置重量
  batchSetWeight(e) {
    if (!this.checkPriceField(e)) return this.$message.error("请填写数值");
    let tempArr = [];
    tempArr = this.getSpecList.map((item) => {
      item.weight = e;
      return item;
    });
    this.$emit("changeNormList", tempArr);
  }
  // 批量设置限购
  batchSetPerlimit(e) {
    if (!this.checkPriceField(e)) return this.$message.error("请填写数值");
    let tempArr = [];
    tempArr = this.getSpecList.map((item) => {
      item.perLimit = e;
      return item;
    });
    this.$emit("changeNormList", tempArr);
  }
  // 检验输入
  checkPriceField(value) {
    let flag = true;
    const priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
    if (!value) {
      flag = false;
    }
    if (!priceReg.test(value)) {
      flag = false;
    }
    return flag;
  }
  equar(a, b) {
    // 判断数组的长度
    if (a.length !== b.length) {
      return false;
    } else {
      // 循环遍历数组的值进行比较
      for (let i = 0; i < a.length; i++) {
        if (a[i] !== b[i]) {
          return false;
        }
      }
      return true;
    }
  }
}
</script>
<style scoped>
</style>